<template>
  <section v-loading="loading">
    <!--工具栏-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
      <el-form :inline="true" :model="condition">
        <el-form-item>
          <el-input v-model="condition.jobNumber" placeholder="工号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition.room" placeholder="房间"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="condition.time"
            type="datarange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--数据展示-->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column align="center" label="序号" type="index" width="50" fixed></el-table-column>
      <el-table-column align="center" label="工号" prop="jobNumber" min-width="100" fixed></el-table-column>
      <el-table-column align="center" label="姓名" prop="name" min-width="80" fixed></el-table-column>
      <el-table-column align="center" label="区域名称" prop="AR_name" min-width="80"></el-table-column>
      <el-table-column align="center" label="宿舍楼" prop="SSL_name" min-width="50"></el-table-column>
      <el-table-column align="center" label="房间号" prop="roomnumber" min-width="50"></el-table-column>
      <el-table-column align="center" label="冷水费" prop="coldcost" min-width="50"></el-table-column>
      <el-table-column align="center" label="热水费" prop="hotcost" min-width="50"></el-table-column>
      <el-table-column align="center" label="电费" prop="electcost" min-width="50"></el-table-column>
      <el-table-column align="center" label="公摊冷水费" prop="avgcoldcost" min-width="80"></el-table-column>
      <el-table-column align="center" label="公摊热水费" prop="avghotcost" min-width="80"></el-table-column>
      <el-table-column align="center" label="公摊电费" prop="avgElectricCost" min-width="80"></el-table-column>
      <el-table-column align="center" label="合计" prop="totalCost" min-width="65"></el-table-column>
      <el-table-column align="center" label="日期" prop="costTime" min-width="100"></el-table-column>
      <el-table-column align="center" label="当月入住天数" prop="totalDay" min-width="100"></el-table-column>
      <el-table-column align="center" label="类型" prop="type" min-width="65">
        <template slot-scope="scope">
          <div v-if="scope.row.type === 'out'">退宿</div>
          <div v-else-if="scope.row.type === 'last'">月底结算</div>
          <div v-else></div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentChange"
        :current-page="currentPage"
        :total="totalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </section>
</template>
<script>
export default {
  data() {
    return {
      condition: {
        jobNumber: null,
        name: null,
        room: null,
        time: null
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      loading: false
    };
  },
  methods: {
    search() {}
  },
  mounted() {}
};
</script>